<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
    <style>
        /* 清除默认标签样式 */
        * {
            margin: 0;
            padding: 0;
        }

        .产品展示-tab栏 {
            width: 590px; /* 宽高 */
            height: 340px;
            margin: 20px auto; /* 外边距, 版心居中 */
            border: 1px solid #e4e4e4; /* 边框线 */
        }

        .标题导航 {
            width: 100%; /* 宽度 随父级盒子 */
            height: 60px; /* 高 */
            line-height: 60px; /* 行高与高相同, 文字垂直居中 */
            
            display: flex; /* flex布局 */
            justify-content: space-between; /* flex布局 主轴对齐方式 */
        }

        .标题导航 h3 {
            font-size: 24px; /* 文字大小 */
            font-weight: normal; /* 文字不加粗 */
            margin-left: 20px; /* 左外边距 */
        }

        .标题导航 ul {
            list-style: none; /* 去除列表默认的 项目图标 */
            display: flex; /* flex布局 */
            justify-content: flex-end; /*主轴对齐方式:末尾对齐, 这里效果右对齐*/
        }

        .标题导航 ul li {
            font-size: 14px; /* 文字大小 */
            margin: 0 20px; /* 外边距2值写法: 上下 左右 */
        }

        .标题导航 ul li a {
            text-decoration: none; /* 去除 超链接默认的下划线 */
            border-bottom: 2px solid transparent; /* 下边框线, 这里边框线设置是 透明*/
            color: #333; /* 文字颜色 */
        }

        .标题导航 ul li a.显示 {
            border-color: #e1251b; /* 文字颜色 大小 */
            color: #e1251b;
        }

        .产品展示区域 {
            padding: 0 16px; /* 内边距 */
        }

        .产品展示区域 .tab栏-产品内容 {
            display: none; /* 显示:隐藏 */
        }

        .产品展示区域 .tab栏-产品内容.显示 {
            display: block; /* 显示:块级, 这里是显示看见 */
        }
    </style>
</head>
<body>

<div class="产品展示-tab栏">
    <div class="标题导航">
        <h3>每日特价</h3>
        <ul>
            <li><a class="显示" href="javascript:;">精选</a></li>
            <li><a href="javascript:;">美食</a></li>
            <li><a href="javascript:;">百货</a></li>
            <li><a href="javascript:;">个护</a></li>
            <li><a href="javascript:;">预告</a></li>
        </ul>
    </div>
    <div class="产品展示区域">
        <div class="tab栏-产品内容 显示"><img src="../素材/tab00.png" alt=""/></div>
        <div class="tab栏-产品内容"><img src="../素材/tab01.png" alt=""/></div>
        <div class="tab栏-产品内容"><img src="../素材/tab02.png" alt=""/></div>
        <div class="tab栏-产品内容"><img src="../素材/tab03.png" alt=""/></div>
        <div class="tab栏-产品内容"><img src="../素材/tab04.png" alt=""/></div>
    </div>
</div>


<!--
Tab栏切换
需求：鼠标经过不同的选项卡，底部可以显示 不同的内

分析：
①：主要核心是类的切换， 设定一个 当前类，可以让当前元素高亮
②：鼠标经过当前选项卡，先移除其余元素身上的 当前类，而只给当前元素添加类，
③：注意，当前类只能有一个
-->
<script>

    // 获取DOM元素
    const 数组_经过链接 = document.querySelectorAll('.产品展示-tab栏 .标题导航 a')
    const 数组_产品展示区域 = document.querySelectorAll('.产品展示区域 div')

    // 循环注册监控事件,元素的鼠标经过事件. 修改相当于的CSS类,以实现切换效果
    for (let i = 0; i < 数组_经过链接.length; i++) {
        // 监控 鼠标经过事件
        数组_经过链接[i].addEventListener('mouseenter', function () {
            //获取DOM元素, 这里是选项卡切换显示设置
            const 选项卡 = document.querySelector('.产品展示-tab栏 .显示')
            选项卡.classList.remove('显示') // 删除标签有类名 "显示", 这个类
            数组_经过链接[i].classList.add('显示') // 触发 鼠标经过事件 的标签,添加 "显示" 这个类

            //获取元素, 这里是产品展示区域切换显示设置
            const 产品图片 = document.querySelector('.产品展示区域 .显示')
            产品图片.classList.remove('显示') // 删除标签有类名 "显示", 这个类
            数组_产品展示区域[i].classList.add('显示') // 触发 鼠标经过事件 的标签,对应的产品展示图片 添加 "显示" 这个类
        })
    }
</script>
</body>
</html>